<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tech Portfolio | 科技个人主页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // Tailwind 自定义配置（主题色、字体）
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        neonBlue: '#00f0ff',
                        neonPurple: '#b300ff',
                        darkBg: '#0a0a16',
                    },
                    fontFamily: {
                        tech: ['"Orbitron"', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-neon {
                text-shadow: 0 0 5px currentColor, 0 0 20px currentColor, 0 0 40px currentColor;
            }
    
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-8px);
                box-shadow: 0 0 25px rgba(0, 240, 255, 0.4);
            }
            
            .bg-grid {
                background-image: linear-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 1px),
                                  linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
                background-size: 30px 30px;
                animation: gridMove 15s linear infinite;
            }
            @keyframes gridMove {
                0% { background-position: 0 0; }
                100% { background-position: 300px 300px; }
            }
        }
    </style>
    <!-- 引入科技感字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
</head>
<body class="bg-darkBg text-white min-h-screen overflow-x-hidden bg-grid">
    <!-- 顶部导航栏（固定+透明渐变） -->
    <nav id="navbar" class="fixed top-0 left-0 w-full z-50 transition-all 0.5s ease">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <a href=" " class="font-tech text-2xl font-black text-neonBlue text-neon">TECH<span class="text-neonPurple">PORT</span></a >
            <!-- 桌面端导航 -->
            <div class="hidden md:flex space-x-8">
                <a href="#about" class="hover:text-neonBlue transition-colors duration-300">关于我</a >
                <a href="#projects" class="hover:text-neonBlue transition-colors duration-300">项目作品</a >
                <a href="#skills" class="hover:text-neonBlue transition-colors duration-300">技能栈</a >
                <a href="#contact" class="hover:text-neonBlue transition-colors duration-300">联系我</a >
            </div>
            <!-- 移动端菜单按钮 -->
            <button id="menuBtn" class="md:hidden text-2xl">
                <i class="fa fa-bars">/</i>
            </button>
        </div>
        <!-- 移动端导航菜单（默认隐藏） -->
        <div id="mobileMenu" class="md:hidden hidden bg-darkBg/95 backdrop-blur-sm">
            <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
                <a href="#about" class="py-2 hover:text-neonBlue transition-colors duration-300">关于我</a >
                <a href="#projects" class="py-2 hover:text-neonBlue transition-colors duration-300">项目作品</a >
                <a href="#skills" class="py-2 hover:text-neonBlue transition-colors duration-300">技能栈</a >
                <a href="#contact" class="py-2 hover:text-neonBlue transition-colors duration-300">联系我</a >
            </div>
        </div>
    </nav>

    <!-- 英雄区（动态渐变+文字动画） -->
    <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden">
        <!-- 背景渐变动画 -->
        <div class="absolute inset-0 bg-gradient-to-br from-darkBg via-purple-900/20 to-blue-900/20 animate-pulse"></div>
        <!-- 装饰性圆形 -->
        <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-neonBlue/10 blur-3xl"></div>
        <div class="absolute bottom-1/4 right-1/4 w-80 h-80 rounded-full bg-neonPurple/10 blur-3xl"></div>
        
        <div class="container mx-auto px-4 text-center z-10">
            <h1 class="font-tech text-[clamp(2.5rem,8vw,5rem)] font-black leading-tight mb-4">
                你好，我是 <span class="text-neonBlue text-neon">开发者</span>
                <br><span class="text-neonPurple text-neon">Tech Dev</span>
            </h1>
            <p class="text-gray-300 text-[clamp(1rem,3vw,1.25rem)] max-w-2xl mx-auto mb-8">
                专注于前端开发、UI设计与交互体验，用代码打造炫酷且实用的数字产品
            </p >
            <a href="#projects" class="inline-block px-8 py-3 bg-gradient-to-r from-neonBlue to-neonPurple rounded-full font-semibold hover:opacity-90 transition-opacity duration-300">
                查看我的作品 <i class="fa fa-arrow-right ml-2"></</i>
            </a >
        </div>

        <!-- 滚动提示 -->
        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
            <i class="fa fa-angle-down text-2xl text-gray-400"></</i>
        </div>
    </section>

    <!-- 关于我区域 -->
    <section id="about" class="py-20 relative">
        <div class="container mx-auto px-4">
            <h2 class="font-tech text-[clamp(1.5rem,5vw,2.5rem)] font-bold mb-12 text-center">
                <span class="text-neonBlue text-neon">#</span> 关于我
            </h2>
            
            <div class="flex flex-col md:flex-row items-center gap-12">
                <!-- 头像 -->
                <div class="relative">
                    <div class="w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-neonBlue/50 shadow-lg shadow-neonBlue/20">
                         img src="https://picsum.photos/id/1012/400/400" alt="开发者头像" class="w-full h-full object-cover">
                    </div>
                    <!-- 装饰点 -->
                    <div class="absolute -bottom-4 -right-4 w-12 h-12 rounded-full bg-neonPurple flex items-center justify-center text-xl">
                        <i class="fa fa-code">/</i>
                    </div>
                </div>

                <!-- 个人信息 -->
                <div class="max-w-2xl">
                    <h3 class="text-2xl font-bold mb-4">Tech Dev - 全栈开发者</h3>
                    <p class="text-gray-300 mb-6 leading-relaxed">
                        拥有5年软件开发经验，擅长将创意想法转化为高质量的数字产品。精通前端技术栈（HTML/CSS/JS/React）与后端框架（Node.js/Java），同时具备UI/UX设计能力，能独立完成从需求分析到产品上线的全流程开发。
                    </p >
                    <div class="grid grid-cols-2 gap-4 mb-8">
                        <div class="flex items-center gap-3">
                            <i class="fa fa-calendar text-neonBlue text-xl w-6 text-center"></</i>
                            <span>5年开发经验</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <i class="fa fa-graduation-cap text-neonBlue text-xl w-6 text-center"></</i>
                            <span>计算机科学学士</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <i class="fa fa-globe text-neonBlue text-xl w-6 text-center"></</i>
                            <span>双语工作能力</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <i class="fa fa-trophy text-neonBlue text-xl w-6 text-center"></</i>
                            <span>3项设计奖项</span>
                        </div>
                    </div>
                    <a href="#contact" class="inline-block px-6 py-2 border border-neonBlue text-neonBlue rounded-full hover:bg-neonBlue/10 transition-colors duration-300">
                        联系我 <i class="fa fa-envelope ml-1">/</i>
                    </a >
                </div>
            </div>
        </div>
    </section>

    <!-- 项目作品区域 -->
    <section id="projects" class="py-20 bg-darkBg/50 backdrop-blur-sm">
        <div class="container mx-auto px-4">
            <h2 class="font-tech text-[clamp(1.5rem,5vw,2.5rem)] font-bold mb-12 text-center">
                <span class="text-neonPurple text-neon">#</span> 项目作品
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 项目1 -->
                <div class="bg-darkBg/80 backdrop-blur-sm rounded-xl overflow-hidden border border-gray-800 card-hover">
                    <div class="h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/180/600/400" alt="电商网站项目" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2 text-neonBlue">智能电商平台</h3>
                        <p class="text-gray-400 mb-4 text-sm">基于React+Node.js开发的全功能电商网站，包含智能推荐、支付集成、订单管理系统，支持多端适配。</p >
                        <div class="flex justify-between items-center">
                            <div class="flex gap-2">
                                <span class="text-xs bg-blue-900/50 text-blue-300 px-2 py-1 rounded">React</span>
                                <span class="text-xs bg-purple-900/50 text-purple-300 px-2 py-1 rounded">Node.js</span>
                            </div>
                            <a href="#" class="text-neonBlue hover:text-neonPurple transition-colors">
                                查看详情 <i class="fa fa-external-link ml-1"></</i>
                            </a >
                        </div>
                    </div>
                </div>

                <!-- 项目2 -->
                <div class="bg-darkBg/80 backdrop-blur-sm rounded-xl overflow-hidden border border-gray-800 card-hover">
                    <div class="h-48 overflow-hidden